<template>
    <page class="notice">
        <v-back/>
        <v-refresh ref="refresh" class="notice-list"  @on-refresh="onRefresh"  @on-load="loadmore">
            <div class="notice-item" v-for="(item,i) in notice" :key="i" :class="i>0&&'border'" @click="goDetail(item)">
                <div class="notice-text" :class="item.status == 1 && 'center'">
                    <p class="notice-content" >{{item.title}}</p>
                    <span class="notice-time" :class="item.status != 1 && 'bottom'">{{item.modifyTime}}</span>
                </div>
                <img v-lazy="showImg(item.imageUrl)" class="notice-image" v-if="item.status==1">
            </div>
        </v-refresh>
    </page>
</template>

<script>
    import vRefresh from '@/components/refresh'
    export default {
        components: {vRefresh},
        name: "index",
        data(){
            return{
                notice: [],
                listFilter: {
                    pageNo: 1,
                    pageSize: 10
                },
                total: 0
            }
        },
        created(){
            this.getNotice(true);
        },
        methods:{
            goDetail(item){
                this.$router.push(`/notice/detail/${item.id}`);
            },


            //下拉刷新
            async onRefresh() {
                this.listFilter.pageNo = 1;
                await this.getNotice(true);
            },


            async loadmore() {
                this.listFilter.pageNo++;
                await this.getList();
            },
            //获取系统公告
            async getNotice(refresh) {
                this.$loading();
                const res = await this.$http.get(`/common/mp/announcement/listPage`, {params: this.listFilter});
                this.$loading.close();

                this.$refs.refresh.close(res.detail.totalCount,res.detail.totalCount <= this.listFilter.pageNo * this.listFilter.pageSize);

                if(refresh){
                    this.notice = res.data;
                }else {
                    this.notice = this.notice.concat(res.data);
                }
                this.total = res.detail.totalCount;
            },
        }
    }
</script>

<style scoped lang="less">
    .notice{
        .notice-list{
            height: calc(100vh - 50px);
            overflow-y: auto;
            .notice-item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: @padding;
                cursor: pointer;
                .notice-text{
                    &.center{
                        height: .8rem;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                    }
                    .notice-content{
                        font-size: @md;
                    }
                    .notice-time{
                        color: #999;
                        font-size: @small;
                        &.bottom{
                            display: block;
                            margin-top: @padding;
                        }
                    }
                }

                .notice-image{
                    margin-left: @padding;
                    width: 1rem;
                    height: .8rem;
                }
                &.border{
                    position: relative;
                    &:after{
                        content: '';
                        position: absolute;
                        width: calc(100% - @padding*2);
                        left: @padding;
                        top: 0;
                        height: 1px;
                        background-color: @border-color;
                    }
                }
            }
        }
    }
</style>
